<template>
  <div>
    <div class="container">
   <div class="rank_bg">
     <div class="rank"></div>
     <div class="rank_time">
       <span>更新日期：{{mm}}月{{dd}}日</span>
     </div>
   </div>
    <Song v-for="(item,index) in rankList" :key="item.id"
     :name="item.name"
    :author="item.song.artists[0].name"
    :id="item.id"
    :index="index"
    ></Song>
  </div>
  </div>
</template>

<script>
import Song from '@/components/SongComponents.vue'
import { rankMusicAPI } from '@/api/index.js'
export default {
  data () {
    return {
      mm: 0,
      dd: 0,
      rankList: []
    }
  },
  components: {
    Song
  },
  async created () {
    const date = new Date()
    this.mm = date.getMonth()
    this.mm++
    this.dd = date.getDate()
    const res = await rankMusicAPI({
      limit: 20
    })
    this.rankList = res.data.result
  }
}
</script>

<style scoped lang="less">
.container{

.rank_bg{
overflow:hidden;
position: relative;
top: -9px;
width: 376px;
height: 147px;
margin-top: 0;
background: url('../../assets/rankmusic.jpg') no-repeat;
background-size: contain;
.rank{
position:absolute ;
top: 40px;
left: 20px;
width: 142px;
height: 67px;
background: url('../../assets/music.png') no-repeat;
background-size: 166px 97px;
background-position: -24px -30px;
}
.rank_time{
position:absolute ;
top: 105px;
left: 20px;
width: 100%;
height: 16.5px;
span{
font-size: 12px;
color: aliceblue;
line-height: 16.5px;
}
}}
}
</style>
